(() => {
    const token = sessionStorage.getItem('token'); //通行码
    const nickName = document.querySelector('.nick-name'); // 用户昵称
    const accountName = document.querySelector('.account-name'); //账户名
    const loginTime = document.querySelector('.login-time'); //最后登录时间
    const contentBody = document.querySelector('.content-body'); //聊天窗口容器
    const iptCotner = document.querySelector('.input-container'); //输入文本框
    const clearBut = document.querySelector('.clear'); //清除按钮
    const sendBut = document.querySelector('.send-btn'); //发送按钮
    const arrowCon = document.querySelector('.arrow-container'); //选择按钮
    const selectCon = document.querySelector('.select-container'); //选项父元素
    const close = document.querySelector('.close');
    let page = 0; //当前第几页聊天记录
    let array = []; //用于存放连天记录
    //如果没有携带或存储通行码返回登录页
    if (!token) {
        window.open('./login.html', '_self');
    }
    //程序入口
    () => {
        init();
    };
    //初始化 需要 渲染右侧个人信息、和获取历史聊天记录渲染到页面
    (async function init() {
        //获取个人信息
        const information = await (async() => {
            try {
                const infor = await fetch(
                    'https://study.duyiedu.com/api/user/profile/', {
                        headers: {
                            Authorization: 'Bearer ' + token,
                        },
                    }
                );
                return await infor.json();
            } catch (err) {
                console.log(err);
            }
        })();
        //渲染个人信息
        nickName.innerText = information.data.loginId;
        accountName.innerText = information.data.nickname;
        loginTime.innerText = getTime(information.data.lastLoginTime);
        //渲染第一页聊天记录
        getChat(page);
    })();

    /**
     * 传入页码，获取聊天记录
     * @param {number } page 页数
     */
    async function getChat(page) {
        const chat = await (async() => {
            try {
                const infor = await fetch(
                    `https://study.duyiedu.com/api/chat/history/?page=${page}&size=10`, {
                        headers: {
                            Authorization: 'Bearer ' + token,
                        },
                    }
                );

                return await infor.json();
            } catch (err) {
                console.log(err);
            }
        })();

        //当返回的数组为空时停止下面的代码
        if (chat.data.length === 0 && page === 0) {
            //没有聊天记录的情况
            getDiv(
                'robot',
                ' 您好！我是腾讯机器人，非常欢迎您的到来，有什么想和我聊聊的吗？'
            );
        } //有聊天记但是加载到最后一条了
        else if (chat.data.length === 0 && page !== 0) return;
        // 将获取到的聊天记存储起来
        array = [...array, ...chat.data];
        //映射一个新的聊天数组
        arr = array.map((item) => item);
        // 清除之前显示 的聊天记录
        contentBody.innerHTML = '';
        //将数组颠倒，然后渲染到页面
        arr.reverse().forEach((item) => {
            //传入相应值
            getDiv(item.from, item.content);
        });
        //当是第一页的情况滚动条在最后一条消息的位置，否则在顶部新加载消息的位置
        if (page > 0) {
            contentBody.scrollTo(0, contentBody.children[9].offsetTop);
        }
    }
    /**
     * 创建一条聊天内容
     * @param {string} who 是谁发的
     * @param {string} txt  内容
     */
    function getDiv(who, txt) {
        const div = document.createElement('div');
        div.className = `chat-container ${
      who === 'robot' ? 'robot' : 'avatar'
    }-container`;
        const img = document.createElement('img');
        img.src = `./img/${who === 'robot' ? 'robot.jpg' : 'avtar.png'}`;
        div.appendChild(img);
        const txtDiv = document.createElement('div');
        txtDiv.className = 'chat-txt"';
        txtDiv.innerText = txt;
        div.appendChild(txtDiv);
        contentBody.appendChild(div);
        //图片加载完成后
        img.onload = function() {
            // 当是第一页的情况滚动条在最后一条消息的位置;
            if (page === 0) {
                contentBody.scrollTo(0, contentBody.offsetHeight);
            }
        };
    }

    //当滚动条滚动到顶部时加载历史聊天记录
    contentBody.addEventListener('scroll', function(e) {
        if (e.target.scrollTop <= 0) {
            page++;
            getChat(page);
        }
    });
    //发送信息
    async function sendMessage(value) {
        const send = await (async() => {
            try {
                const a = await fetch('https://study.duyiedu.com/api/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        Authorization: 'Bearer ' + token,
                    },
                    body: JSON.stringify({
                        content: value,
                    }),
                });

                return await a.json();
            } catch (err) {
                console.log(err);
            }
        })();
        return send;
    }
    //点击发送按钮，
    sendBut.addEventListener('click', send);
    clearBut.addEventListener('click', () => {
        iptCotner.value = '';
    });
    //选择箭头点击触发什么
    arrowCon.addEventListener('click', () => {
        selectCon.style.display = 'block';
    });
    //当选择发送方式后绑定事件
    selectCon.addEventListener('click', (e) => {
        selectCon.querySelector('.on').classList.remove('on');
        e.target.classList.add('on');
        selectCon.style.display = 'none';

        if (e.target.getAttribute('type') === 'enter') {
            window.onkeyup = (e) => {
                if (e.key === 'Enter' && e.ctrlKey === false) {
                    send();
                }
            };
        } else if (e.target.getAttribute('type') === 'ctrlEnter') {
            window.onkeyup = (e) => {
                if (e.key === 'Enter' && e.ctrlKey === true) {
                    send();
                }
            };
        }
    });
    //退出
    close.onclick = () => {
        sessionStorage.removeItem('token');
        window.open('./login.html', '_self');
    };

    //发送消息的函数
    async function send() {
        if (iptCotner.value !== '') {
            const txt = iptCotner.value;
            iptCotner.value = '';
            getDiv('avtar', txt);

            contentBody.scrollTo(0, contentBody.scrollHeight);
            const roTxt = await sendMessage(txt);
            if (!roTxt) return;

            getDiv('robot', roTxt.data.content);
            contentBody.scrollTo(0, contentBody.scrollHeight);
        } else {
            window.alert('消息不能为空');
        }
    }
    /**
     * 传入时间字符串改变为-年-月-日格式
     * @param {string} time 时间字符串
     * @returns
     */
    const getTime = (time) => {
        const a = time.split('-');
        a[2] = a[2].substring(0, 2);
        return `${a[0]}年 ${a[1]}月${a[2]}日`;
    };
})();